<template>
  <div>
    <div class="title-box">
      <div class="title-item-left">
        <span class="text-icon"></span>
        操作记录
      </div>
    </div>
    <div>
      <a-table
        size="small"
        :columns="state.column"
        :dataSource="state.table"
        :loading="state.tableLoading"
        :pagination="false"
        :scroll="{ y: 'calc(100vh - 215px)' }"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex == 'context'">
            <a-popover
              title="详细信息"
              trigger="hover"
              placement="leftBottom"
              :overlayStyle="{ width: '500px' }"
            >
              <template #content>
                <pre style="white-space: pre-wrap; word-wrap: break-word">{{ record.context }}</pre>
              </template>
              {{ record.context }}
            </a-popover>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getOperationRecord } from '@/api/patientManagement/index.ts'
const state = reactive({
  column: [
    {
      title: '操作名称',
      key: 'operationName',
      align: 'left',
      dataIndex: 'operationName'
    },
    {
      title: '操作时间',
      key: 'operationTime',
      align: 'left',
      dataIndex: 'operationTime'
    },
    {
      title: '操作人员',
      key: 'operator',
      align: 'left',
      dataIndex: 'operator'
    },
    {
      title: '详细信息',
      key: 'context',
      align: 'left',
      dataIndex: 'context',
      ellipsis: true
    },
    {
      title: '备注信息',
      key: 'remark',
      align: 'left',
      dataIndex: 'remark'
    }
  ],
  table: [],
  tableLoading: false
})
const patId = ref()

const init = (id) => {
  patId.value = id
  state.tableLoading = true

  getOperationRecord({ id: id })
    .then((res) => {
      console.log(res)
      state.tableLoading = false
      state.table = res.data
    })
    .catch(() => {
      state.tableLoading = false
    })
}

defineExpose({
  init
})
</script>

<style lang="less" scoped>
.title-box {
  width: 100%;
  height: 32px;
  color: #1d2129;
  line-height: 32px;
  font-weight: 600;
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;

  .title-item-left {
    font-weight: 600;
    font-size: 18px;
  }

  .text-icon {
    width: 3px;
    height: 16px;
    background: #165dff;
    margin-right: 8px;
    display: inline-block;
    line-height: 32px;
  }
}
</style>
